<template>
			<view class="hotBox">
				<!-- <image class="isBg" src="https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/center_bg.png"></image> -->
				<view style="width: 92vw;margin: auto;" class="isTitle">当前热播</view>
				<view class="content" v-if="listItem.length > 0 && hasLoad[listIndex]">
					<view v-for="(cardItem, cardIndex) in listItem" class="jjItemBox">
						<jjItem :nowItem="cardItem"></jjItem>
					</view>
					<view v-if="listItem.length % 3 == 2" style="width:230rpx;height: 342rpx;"></view>
				</view>
				<view class="content" v-if="listItem.length === 0 && !hasLoad[listIndex]">
					<view class="jjItemBox" v-for="(itemScaff, indexScaff) in 9" :key="index">
						<view class="imgBox"><view class="imgBox" style="background:#f7f7f7;"></view></view>
					</view>
				</view>
				<view class="content" v-if="listItem.length === 0 && hasLoad[listIndex]"><noData></noData></view>
				<view class="loadMoreBox" @click.stop="lower1" v-if="listItem.length > 3">
					<loadMore @loadMore="lower1">
						<view class="loadMore">{{ noMore[listIndex] == 1 ? '到底啦，别再拉了～' : noMore[listIndex] == 0 ? '加载更多' : '加载中' }}</view>
					</loadMore>
				</view>
			</view>

</template>

<script>
	import jjItem from './jjItem.vue';
	export default {
		components: {jjItem},
		props:{
			listIndex:{
				default:0.,
				default:Number
			},
			listItem:{
				default:()=>{
					return []
				},
				type:Array
			},
			noMore:{
				default:()=>{
					return []
				},
				type:Array
			},
			hasLoad:{
				default:()=>{
					return []
				},
				type:Array
			}
		},
		data() {
			return {
			}
		},
		methods: {
			lower1(){
				this.$emit('loadMore');
			},
			toJJ(item, type) {
				if (type == 'mayLike') {
					this.$uma && this.$uma.trackEvent('Ume_skip', {
						name: 'Ume_skip_page1_like'
					});
				} else if (type == 'hot') {
					this.$uma && this.$uma.trackEvent('Ume_skip', {
						name: 'Ume_skip_page1_hot'
					});
				}
				console.log('item', item);
				uni.navigateTo({
					url:`../video/video?fakeId=${item.fakeId}&compilationId=${item.compilationId}`
				})
			}
		},
		onReady() {
			
		},
		created() {
		}
	}
</script>

<style lang="scss" scoped>
	.isBg{
		width: 162rpx;
		height: 82rpx;
		position: absolute;
		left: 0;
		right: 0;
	}
		.isTitle{
			margin-bottom: 26rpx;
			padding-top: 37rpx;
			width: 100%;
			padding-left: 44rpx;
			font-weight: bold;
			font-size: 38rpx;
			color: #333333;
			margin-bottom: 3rpx;
		}
	.hotBox{
		margin: 0 auto 42rpx auto;
		width: 710rpx;
		position: relative;
		background: url('https://res.qiguoread.com/staticResources/fellow_townsman/image/uni/toutiao/index_bg_center1.png') no-repeat center center;
		background-size: 100% 100%;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 50rpx;
		overflow: hidden;
	}
	
	.imgItem {
		.imgDesTitle {
			flex: 1;
			overflow: hidden;
			-ms-text-overflow: ellipsis;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.imgLabel {
			margin-right: 5rpx;
			font-size: 21rpx;
			color: white;
			width: 55rpx;
			height: 29rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4rpx;
		}
		.labelColor0 {
			background: linear-gradient(225deg, rgba(255, 185, 92, 1) 0%, rgba(247, 123, 0, 1) 100%);
		}
		.labelColor2 {
			background: linear-gradient(225deg, rgba(155, 226, 91, 1) 0%, rgba(99, 171, 21, 1) 100%);
		}
		.labelColor1 {
			background: linear-gradient(225deg, rgb(250, 132, 162) 0%, rgb(255, 129, 160) 30%);
		}
		.labelColor3 {
			background: linear-gradient(225deg, rgba(255, 185, 92, 1) 0%, rgba(247, 123, 0, 1) 100%);
		}
		.labelColor4 {
			background: linear-gradient(225deg, rgb(11, 185, 234) 0%, rgb(72, 211, 250) 100%);
		}
		.labelColor5 {
			background: linear-gradient(225deg, rgb(220, 124, 253) 0%, rgb(248, 83, 246) 100%);
		}
		.imgDesBox {
			box-sizing: border-box;
			font-size: 26rpx;
			color: #474747;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 0 7rpx;
			box-sizing: border-box;
		}
		.imgBox {
			border-radius: 13rpx;
			position: relative;
			width: 220rpx;
			height: 330rpx;
		}
		.vipImg {
			width: 66rpx;
			height: 36rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 9;
		}
		width: 220rpx;
		box-sizing: border-box;
		display: flex;
		position: relative;
		margin-top: 19rpx;
		flex-direction: column;
		overflow: hidden;
	}
	.loadMore {
		background-color: #ffffff;
		padding: 0 23rpx;
		position: relative;
		z-index: 11;
	}
	.loadMoreBox::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 90vw;
		height: 2rpx;
		background-color: #d9d9d9;
		margin: auto;
	}
	.loadMoreBox {
		position: relative;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		font-size: 22rpx;
		color: #c3c3c3;
	}
	.content {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding: 0 5%;
		box-sizing: border-box;
		justify-content: space-between;
	}
</style>
